<template>
  <div class="mainBox">
    <!-- <div>
      <a-upload
        name="file"
        :multiple="true"
        action="#"
        :customRequest="upload"
        :headers="headers"
        @change="handleChange"
      >
        <a-button> <a-icon type="upload" /> Click to Upload </a-button>
      </a-upload>
      <div>
          <img :src="imageUrl" alt="">
      </div>
    </div> -->
    <a-form :form="form" @submit="handleSubmit" autoComplete="off">
      <a-row>
        <a-col :span="24"
          ><a-form-item label="内容">
            <Editorbar
              ref="editor"
              :disabled="true"
              v-model="content"
              placeholder="请输入宣传语"
              style="width: 100%"
            ></Editorbar>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="footBtn">
      <span v-if="!isEdit">
        <a-button type="primary" @click="editAdd" style="margin-right: 24px">
          {{ isHave ? "修改" : "新增" }}
        </a-button>
      </span>
      <a-button
        v-else
        type="primary"
        @click="handleSubmit"
        style="margin-right: 24px"
      >
        提交
      </a-button>
      <a-button @click="handleCancel" style="margin-right: 24px" v-if="isEdit"
        >取消
      </a-button>
      <span v-if="isHave">
        <a-button type="danger" @click="handleDelete">删除</a-button>
      </span>
    </div>
  </div>
</template>

<script>
import Editorbar from "../../components/WangEditor";
import {
  postAction,
  getAction,
  deleteAction,
  putAction,
} from "../../http/manage";
export default {
  components: {
    Editorbar,
  },
  data() {
    return {
      headers: {
        authorization: "authorization-text",
      },
      imageUrl:'',
      tableData: "",
      content: "",
      isEdit: false,
      isHave: true,

      statusVideo: this.$store.state.status,
      imgStatus: this.$store.state.imgStatus,

      form: this.$form.createForm(this),

      url: {
        list: "/privacyProtectExemption/privacyProtectExemptionSelect",
        addList: "/privacyProtectExemption/privacyProtectExemptionAdd",
        editList: "/privacyProtectExemption/privacyProtectExemptionUpdate",
        deleteList: "/privacyProtectExemption/privacyProtectExemptionDelete/",
      },
    };
  },
  inject: ["reload"],
  mounted() {
    this.getList();
    if (this.isHave == true) {
      this.$refs.editor.disableEditor();
    }
  },
  watch: {
    "$store.state.status"() {
      this.statusVideo = this.$store.state.status;
    },
    "$store.state.imgStatus"() {
      this.imgStatus = this.$store.state.imgStatus;
    },
  },
  methods: {
    upload(res) {
      const COS = require("cos-js-sdk-v5");
      // 填写自己腾讯云cos中的key和id (密钥)
      const cos = new COS({
        SecretId: "AKIDe7KI0SdXAXcQxDDwSiiSv73i6C2btue8", // 身份识别ID
        SecretKey: "EApEMDn7AwRfcIhplQovmMQEl10i9KEr", // 身份秘钥
      });
      console.log(res);
      console.log(COS);
      console.log(cos);
      if (res.file) {
        // 执行上传操作
        cos.putObject(
          {
            Bucket: "gejia-1309645365" /* 存储桶 */,
            Region: "ap-nanjing" /* 存储桶所在地域，必须字段 */,
            Key: res.file.name /* 文件名 */,
            StorageClass: "STANDARD", // 上传模式, 标准模式
            Body: res.file, // 上传文件对象
            onProgress: (progressData) => {
              // 上传进度
              console.log(JSON.stringify(progressData));
            },
          },
          (err, data) => {
            console.log(err || data);
            // 上传成功之后
            console.log(data);
            if (data.statusCode === 200) {
              this.imageUrl = `https:${data.Location}`;
              console.log(this.imageUrl);
            }
          }
        );
      }
    },
    handleChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },
    getList() {
      getAction(this.url.list).then((res) => {
        if (res.data.code === 0) {
          this.tableData = res.data.data;
          this.isHave = this.tableData.content ? true : false;
          this.content = this.tableData.content;
        }
      });
    },
    editAdd() {
      this.$refs.editor.enableEditor();
      this.isEdit = true;
    },
    //取消
    handleCancel() {
      this.isEdit = false;
      this.$refs.editor.disableEditor();
      this.reload();
    },
    //删除
    handleDelete() {
      deleteAction(this.url.deleteList + this.tableData.id)
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success("删除成功");
            this.isEdit = false;
            this.isHave = true;
            this.$refs.editor.disableEditor();
            this.reload();
          }
        })
        .catch(() => {});
    },
    //提交
    handleSubmit(e) {
      if (this.content == "" || this.content == null) {
        this.$message.warning("请输入内容！");
      } else if (this.statusVideo == false) {
        this.$message.warning("富文本视频上传中，稍后再试！");
      } else if (this.imgStatus == false) {
        this.$message.warning("富文本图片上传中，稍后再试！");
      } else {
        if (this.isHave) {
          var params = {
            content: this.content,
            id: this.tableData.id,
          };
          putAction(this.url.editList, params)
            .then((res) => {
              if (res.data.code == 0) {
                this.$message.success("修改成功");
                this.isEdit = false;
                this.isHave = true;
                this.$refs.editor.disableEditor();
                this.reload();
              }
            })
            .catch(() => {});
        } else {
          var params = {
            content: this.content,
          };
          postAction(this.url.addList, params)
            .then((res) => {
              if (res.data.code == 0) {
                this.$message.success("新增成功");
                this.isEdit = false;
                this.isHave = true;
                this.$refs.editor.disableEditor();
                this.reload();
              }
            })
            .catch(() => {});
        }
      }
    },
  },
};
</script>

<style scoped>
.mainBox {
  background-color: #fff;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid rgba(229, 236, 237, 1);
  box-shadow: 0px 11px 14px -10px rgba(229, 236, 237, 1);
}
.mainBox /deep/ .text {
  height: 500px;
}
</style>